<template>
    <view class="box">
        <view>
            <!-- 头部 -->
            <view class="header">
                <text class="text">支付</text>
                <image @click="closeShow" class="image" src="../../../../static/img/myhome/close@3x.png"></image>
            </view>
        </view>
        <!-- 中间内容 -->
        <view class="sonbox">
            <view>
                <view class="text1"><text>标为完成，您将需要支付该笔订单环保金给用户</text></view>
                <view class="text2"><text>￥{{data.price}}</text></view>
                <view class="text3"><text @click="toRecharge">我的余额￥{{runbao}} <text class="a">去充值></text></text></view>
                <view style="display: flex;">
                    <button class="button" @click="send(1)">现金支付</button>
                    <button class="button" @click="send(2)">确定支付</button>
                </view>
            </view>

            <!-- <view class="ok" v-if="!ishow">
                <image class="img" src="../../../../static/img/myhome/wancheng@3x.png" mode=""></image>
                <view class="text"><text>支付成功</text></view>
                <button class="button" @click="closeShow">返回</button>
            </view> -->
        </view>
        <u-popup v-model="popupShow" mode="center" border-radius="20">
            <view style="padding: 50rpx;">
                <view style="font-size: 35rpx;font-weight: bold;text-align: center;">输入密码</view>
                <view style="display: flex;font-size: 30rpx;padding: 50rpx 0;">
                    <!-- <view style="width: 150rpx;text-align: right;">密码：</view> -->
                    <view>
                        <input type="number" v-model="password" maxlength="6" placeholder="请输入六位密码" password style="border-bottom: 1rpx solid #999999;"/>
                    </view>
                </view>
                <view>
                    <button @click="sendPassword" style="background-color: #18B566;color: #FFFFFF;" :disabled="disabledStatus">支付</button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        props: {
            data: Object
        },
        data() {
            return {
                ishow: false,
                runbao: 0,
                popupShow: false,
                password: '',
                disabledStatus: false,
                send_type:0
            };
        },
        mounted() {
            this._getInfo();
        },
        methods: {
            // 关闭弹窗
            closeShow() {
                this.$emit('closeMin2')
            },
            toRecharge() {
                uni.navigateTo({
                    url: 'myhome/Recharge'
                })
            },
            send(send_type) {
                this.popupShow = true;
                this.send_type = send_type
            },
            sendPassword() {
                if(this.$u.test.isEmpty(this.password)) {
                    uni.showToast({
                        title: '请输入密码',
                        duration: 1000,
                        icon: 'none',
                    });
                    return ;
                }
                this._postComplete()
            },
            // 用户信息api
            _getInfo(key) {
                this.$u.api.getInfo().then(res => {
                    this.runbao = res.runbao;
                    // console.log(res+"正确")
                }).catch(e => {
                    // console.log(e+"错误")
                })
            },
            _postComplete() {
                this.disabledStatus = true;
                uni.showLoading({
                    title: '加载中'
                });
                this.$u.api.postComplete({
                    id: this.data.id,
                    password: this.password,
                    send_type:this.send_type
                }).then(res => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '支付成功',
                        duration: 1000
                    });
                    this.popupShow = false;
                    this.disabledStatus = false;
                    this.$emit('closeMin');
                }).catch(err => {
                    uni.hideLoading();
                    uni.showToast({
                        title: err.msg,
                        duration: 2000,
                        icon: 'none'
                    });
                    // this.disabledStatus = true;
                    this.disabledStatus = false;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #EEEEEE;
        z-index: 100000;
        padding-bottom: 50rpx;
    }

    .header {
        height: 88rpx;
        background-color: #ffffff;
        line-height: 88rpx;

        .text {
            margin-left: 30rpx;
        }

        .image {
            width: 80rpx;
            height: 80rpx;
            float: right;
        }
    }

    .sonbox {
        text-align: center;
        height: 458rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        margin: 30rpx;
        padding-top: 61rpx;

        .ok {
            padding-top: 66rpx;
            border-radius: 20rpx;
            width: 100%;
            background-color: #FFFFFF;
            z-index: 99999;

            .img {
                width: 130rpx;
                height: 130rpx;
            }

            .text {
                font-size: 32rpx;
                color: #1bc078;
                margin-top: 31rpx;
            }

            .button {
                margin-top: 46rpx;
                height: 98rpx;
                background-color: #ffffff;
                border-radius: 49rpx;
                border: solid 2rpx #1bc078;
                font-size: 28rpx;
                color: #1bc078;
            }
        }

        .text1 {
            font-size: 24rpx;
            color: #999999;
        }

        .text2 {
            margin-top: 39rpx;
            font-size: 60rpx;
            color: #2d3945;
        }

        .text3 {
            margin-top: 58rpx;
            font-size: 24rpx;
            color: #999999;

            .a {
                margin-left: 30rpx;
                font-size: 24rpx;
                color: #1bc078;
            }
        }

        .button {
            margin-top: 26rpx;
            // width: 570rpx;
            // height: 98rpx;
            width: 300rpx;
            height: 98rpx;
            
            background-color: #1bc078;
            border-radius: 49rpx;
            color: #FFFFFF;
            font-size: 28rpx;
            line-height: 98rpx;
        }

    }
</style>
